<template>
  <v-overlay v-if="showRegistration">
    <v-sheet
      color="thirdary"
      :width="$vuetify.breakpoint.mdAndUp ? 500 : 300"
      class="rounded-lg overflow-hidden"
    >
      <v-sheet
        color="primary"
        height="80px"
        class="d-flex justify-center align-center"
        ><span class="text-h5">挂号预约</span>
        <span
          class="iconfont p-absolute right top mr-4 mt-4 cur-point"
          style="font-size: 1.5rem"
          @click="closeRegistration"
          >&#xe639;</span
        >
      </v-sheet>
      <v-sheet
        class="pa-8 pb-12 h-100 fontblack--text p-relative"
        color="thirdary"
      >
        <div class="d-flex justify-start">
          <div class="d-flex justify-center flex-column align-center">
            <v-avatar color="primary" size="80">
              <v-img :src="doctorInfo.avatar"></v-img>
            </v-avatar>
            <div class="primary--text text-h6">{{ doctorInfo.name }}</div>
          </div>
          <div class="ml-10 h-100 d-flex flex-column">
            <div class="text-body-1 text-md-h5 mb-2 primary--text">{{ doctorInfo.hospitalName }}</div>
            <div class="text-body-2 mb-2">{{ doctorInfo.department.name }}</div>
            <div v-if="$vuetify.breakpoint.mdAndUp">
              <v-chip
                v-for="(disease, index) in doctorInfo.illnesses"
                color="primary"
                :key="index"
                class="mr-2 py-3 text-caption"
                x-small
                >{{ disease ? disease.name : "" }}</v-chip
              >
            </div>
          </div>
        </div>
        <v-select
          light
          :label="`请选择在${doctorInfo.department.name}要会诊的健康问题`"
          :items="illnesses"
          v-model="selectedIllness"
        ></v-select>
        <div class="text-h6">请选择您要预约的时间</div>
        <v-select
          label="日期"
          light
          autocomplete="off"
          :items="date ? date.nextWeeks : ['请稍后']"
          v-model="date.selectedDate"
        ></v-select>
        <v-select
          label="时间"
          light
          autocomplete="off"
          :items="date ? date.appointableTime : ['请选择日期']"
          v-model="date.selectedTime"
        ></v-select>
        <v-text-field
          label="您的手机号码"
          light
          autocomplete="off"
          v-model="phone"
        ></v-text-field>
        <v-btn
          color="primary"
          width="100%"
          @click="summit"
          :loading="btnLoading"
          >预约</v-btn
        >
      </v-sheet>
    </v-sheet></v-overlay
  >
</template>



<script>
import { mapState } from "vuex";
import eventBus from "../../eventBus/eventBus";
import { Date } from "./../../untill/getDate.js";
export default {
  data() {
    return {
      doctorInfo: null,
      showRegistration: false,
      toggle_exclusive: "",
      btnLoading: false,

      illnesses: [],
      phone: "",
      date: new Date(),
      selectedIllness: "",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    closeRegistration() {
      this.showRegistration = false;
    },

    async summit() {
      const userInfoId = this.userInfo?.id;
      const doctorInfoId = this.doctorInfo?.id;
      const date = this.date?.selectedDate;
      const time = this.date?.selectedTime;
      const phone = this.phone;
      const illness = this.selectedIllness;
      const form = { userInfoId, doctorInfoId, date, time, phone, illness };
      this.btnLoading = true;
      const { data } = await this.$axios.post(
        "reser-table/createReserTable",
        form
      );
      if (data.code == 200) {
        this.btnLoading = false;
        alert("预约成功");

        this.showRegistration = false;
        this.$router.push('/personage')
      }
    },
  },
  async mounted() {
    eventBus.$on("openRegistration", (doctorInfo) => {
      this.showRegistration = true;
      this.doctorInfo = doctorInfo;
      this.phone = this.userInfo?.phone;
      this.$axios
        .get(
          `department/getIllness?departmentName=${doctorInfo.department.name}`
        )
        .then((res) => {
          const { illnesses } = res.data;
          this.illnesses = illnesses?.map((item) => item?.name);
        });
    });
    this.selectedDate = this.date.todayDate;
  },
};
</script>



<style lang="scss" scoped>
</style>
